<template>
     <a-modal
      title="新增"
      :width=800
      :maskClosable=false
      v-model="visible"
      @ok="handleOk"
    >

      <a-form :form="form">
          <a-form-item
            label="角色"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'roleName',
                {initialValue:sysRole.roleName,rules: [{ required: true, message: '请输入角色名' }]}
              ]"
              placeholder="给角色起个名字" />
          </a-form-item>
        <a-form-item
            label="备注"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-textarea
              v-decorator="[
                'remark',
                {initialValue:sysRole.remark,rules: [{ required: false, message: '请输入授权备注' }]}
              ]"
              placeholder="请输入授权备注" />
        </a-form-item> 

        <a-form-item
            label="权限"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
             <a-tree
              checkable
              :treeData="resourceTreeData"
              :checkStrictly="true"
              :defaultExpandAll="defaultExpandAll"
              :checkedKeys="checkedKeys"
              @check="this.onCheck"

            />

        </a-form-item>  

      </a-form>

    </a-modal>

</template>
<script>
import { getResourceList,getRoleResrouceList, saveRole } from '@/api/sys'

export default {
  name: 'SysRoleModal',
  data() {
    return {
      visible: false,
      sysRole: {},
      defaultExpandAll: true,
      checkedKeys: [],
      form: this.$form.createForm(this),
      resourceTreeData: []
    }
  },
  methods: {
    handleEdit(record) {
      this.form.resetFields()
      this.checkedKeys = []
      this.loadRolePermsData(record.id)
      this.sysRole = Object.assign({}, record)
    },
    handleCreate() {
      this.sysRole = {}
      this.form.resetFields()
      this.checkedKeys = []
      this.loadResourceData()
    },

    // handler
    handleOk () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
          const params = { ...values }
          params.id = this.sysRole.id
          params.resourceIds =  this.checkedKeys
          console.log(params)
          saveRole(params).then(res => {
            _this.$message.success('保存成功')
            _this.visible = false
            _this.$emit('ok')
          })
        }
      })
    },
    loadResourceData(){
        getResourceList()
              .then(res => {
                console.log(res)
                const treeData = []
                res.data.forEach(item => {
                  const node = {
                    title: item.name,
                    key: item.id
                  }
                 setChildren(node,item.children)
                 treeData.push(node)
                })
                this.resourceTreeData = treeData
                console.log(this.resourceTreeData)
                this.visible = true
              })
    },
    loadRolePermsData(roleId){
        getRoleResrouceList({roleId:roleId})
              .then(res => {
                this.checkedKeys = res.data
                this.loadResourceData()
              })
    },
    onCheck (checkedKeys) {
      this.checkedKeys = checkedKeys.checked
      console.log('checkedKeys:{}', this.checkedKeys)

    },
  },
  created() {
  }
}

function setChildren(node,children){
  if(children){
    node.children = []
    children.forEach(item => {
         const cNode = {
          title: item.name,
          key: item.id,
          id: item.id,
          }
          setChildren(cNode,item.children)
          node.children.push(cNode)
    })
  }
}


</script>
